<template>
  <el-descriptions
    class="margin-top"
    title="公众监督数据详情"
    :column="1"
    border
    style="margin-top: 20px;"
  >
    <template #extra>
      <el-button type="primary" @click="back">返回</el-button>
    </template>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          公众监督反馈信息编号
        </div>
      </template>
      {{aqiFeedback.afId}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          反馈者信息
        </div>
      </template>
      <el-tag size="small">{{aqiFeedback.supervisor.realName}}</el-tag>&nbsp;
      <el-tag size="small">{{aqiFeedback.supervisor.sex==1?'男':'女'}}</el-tag>&nbsp;
      <el-tag size="small">{{aqiFeedback.supervisor.birthday}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          反馈者联系电话
        </div>
      </template>
      {{aqiFeedback.telId}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          反馈信息所在地址
        </div>
      </template>
      <el-tag size="small">{{aqiFeedback.gridProvince.provinceName}}</el-tag>&nbsp;
      <el-tag size="small">{{aqiFeedback.gridCity.cityName}}</el-tag>&nbsp;
      <el-tag size="small">{{aqiFeedback.address}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          反馈信息描述
        </div>
      </template>
      {{aqiFeedback.information}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          预估等级
        </div>
      </template>
      <el-tag size="small">{{aqiFeedback.aqi.chineseExplain}}级</el-tag>&nbsp;
      <el-tag size="small">{{aqiFeedback.aqi.aqiExplain}}</el-tag>&nbsp;
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          反馈日期时间
        </div>
      </template>
      <el-tag size="small">{{aqiFeedback.afDate}}</el-tag>&nbsp;
      <el-tag size="small">{{aqiFeedback.afTime}}</el-tag>&nbsp;
    </el-descriptions-item>
  </el-descriptions>
  <el-alert 
       :title="'已指派网格员：'+aqiFeedback.gridMember.gmName+'（电话号码：'+aqiFeedback.gridMember.tel+'）'" 
       type="success" 
       center 
       show-icon
       style="margin-top: 20px;"
       v-if="aqiFeedback.state==1" />
</template>

<script setup>
import { ref, inject } from "vue";
import { useRouter, useRoute } from "vue-router";

const route = useRoute();
const router = useRouter();
const axios = inject('axios');

const aqiFeedback = ref({
  supervisor:{},
  gridProvince: {},
  gridCity: {},
  aqi: {},
  gridMember: {}
});

const init = ()=>{
  axios
    .post("aqiFeedback/getAqiFeedbackById", {
      //接受了route的，url可以找到id
      afId: route.query.afId
    })
    .then((response) => {
      aqiFeedback.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });
}
init();

const back = ()=>{
  router.go(-1);
}
</script>

<style>

</style>